<template>
    <div class="getHistory">
        <div style="display: flex;justify-content: space-between;">
            <el-form
            :inline="true"
            :model="searchParams"
            class="formInline"
            size="small"
        >
            <el-form-item label="模版名称">
                <el-input
                    v-model="searchParams.input1"
                    placeholder="请输入模版名称"
                ></el-input>
            </el-form-item>

            <el-select v-model="searchParams.select1" placeholder="请选择流程类型" size="small" clearable >
                <el-option v-for="item in dictList" :key="item.lxxdm" :label="item.lxxmc" :value="item.lxxdm"></el-option>
            </el-select>

            <el-form-item>
                <el-button type="primary" @click="onSubmit" style="margin-left: 6px;">查询</el-button>
            </el-form-item>
            </el-form>
            <el-button @click="loadNewFrom" style="height:32px;" size="small">新增模板</el-button>
        </div>

        <tableList
            border
            :loading="loading"
            :heightMin="80"
            :total="pages.total"
            :keySet="keySet"
            height="420"
            :autoHeight="true"
            :tableData="listDetails"
            :handlerShow="true"
            :paginationShow="true"
            :pageNumber="pages.current"
            :pageSize="pages.size"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
        >
            <template #handler="{ row }">
                <div @click="edit(row)" class="worldBlueBtn">编辑</div>
            </template>
        </tableList>

        <vxe-modal
            v-model="templateDialogShow"
            class="dialogClass"
            :title="templateTitle"
            width="1200"
            height="400"
            show-zoom
            resize
            remember
            fullscreen
        >
            <template v-slot>
                <el-steps :active="active" finish-status="success">
                    <el-step title="步骤 1"></el-step>
                    <el-step title="步骤 2"></el-step>
                </el-steps>
                <div  style="display: flex; justify-content: start">
                    <!-- <span>这里是一个steps组件</span> -->
                    <el-button v-if="active == 0" @click="next">下一步</el-button>
                    <el-button v-if="active == 1" @click="pre">上一步</el-button>
                    <el-button v-if="active == 1 && !$store.state.flow.design.id" @click="subTemp">发布</el-button>
                    <el-button v-if="active == 1 && $store.state.flow.design.id" @click="subTemp">保存</el-button>
                </div>
                <el-form v-if="active == 0" ref="form" :model="formData" label-width="80px">
                    <el-form-item label="流程名称">
                        <el-input v-model="formData.templateName"></el-input>
                    </el-form-item>
                    <el-form-item label="流程说明">
                        <el-input v-model="formData.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="流程类型">
                        <el-select :disabled="templateTitle === '编辑模板'" v-model="formData.busType" placeholder="请选择类型">
                        <el-option v-for="item in dictList" :key="item.lxxdm" :label="item.lxxmc" :value="item.lxxdm"></el-option>
                    </el-select>
                    </el-form-item>

                </el-form>

                <processDesign v-if="active == 1" ref="processDesign" />
            </template>
        </vxe-modal>
    </div>
</template>

  <script>
import mixinTable from '@/mixin/mtable.js'
import tableList from '@/components/tableList/index.vue'
import processDesign from '@/components/process/index.vue'
import { getFormTemplateById,list,updateTemplate,saveTemplate }from '@/api/wfProcessTemplates.js'
import { getDefBIzdictByLxdm}from '@/api/system.js'


export default {
    name: 'getHistory',
    mixins: [mixinTable],
    props: {},
    data() {
        return {
            templateTitle:'新增模板',

            dictList:[],
            templateDialogShow: false,
            active:0,
            formData: {
                templateName:'',
                remark:'',
                busType:'',
            },
            date1: '',
            date2: '',

            keySet: [
                {
                    label: '模板id',
                    englishName: 'id',
                },
                {
                    label: '模板名称',
                    englishName: 'templateName',
                },
                {
                    label: '流程类型',
                    englishName: 'busTypeName',
                },
                {
                    label: '备注',
                    englishName: 'remark',
                },
                {
                    label: '创建时间',
                    englishName: 'createTime',
                },
                {
                    label: '修改时间',
                    englishName: 'updateTime',
                },
            ],
            listDetails: [

            ],
        }
    },
    methods: {
        onSubmit() {
            let params = {
                templateName: this.searchParams.input1,
                busType: this.searchParams.select1
            }
            this.getList(params)
        },
        edit(row) {
            this.templateTitle = '编辑模板'
            this.getTempId({
                id: row.id,
                pageNo: this.pages.current,
                pageSize: this.pages.size,
            })
        },
        getTempId(params) {
          getFormTemplateById(
                params
            ).then(
                ({ data }) => {
                    this.templateDialogShow = true
                    let form = {...data};
                    form.logo = JSON.parse(form.logo||'{}')
                    form.settings = JSON.parse(form.settings||'{}')
                    form.formItems = JSON.parse(form.formItems||'{}')
                    form.formJson = JSON.parse(form.formJson||'{}')
                    form.process = JSON.parse(form.process||'{}')

                    this.formData.templateName = data.templateName;
                    this.formData.remark = data.remark;
                    this.formData.busType = data.busType;

                    this.$store.commit('loadForm', form)
                },
                (err) => {
                }
            )
        },
        loadNewFrom() {
            this.templateTitle = '新增模板'
            this.formData = {
                            templateName:'',
                            remark:'',
                            busType:'',
                        }
            this.$store.commit('loadForm', {
                templateId: null,
                templateName: '未命名表单',
                logo: {
                    icon: 'el-icon-eleme',
                    background: '#1e90ff',
                },
                settings: {
                    commiter: [],
                    admin: [],
                    sign: false,
                    notify: {
                        types: ['APP'],
                        title: '消息通知标题',
                    },
                },
                groupId: undefined,
                formItems: [],
                process: {
                    id: 'root',
                    parentId: null,
                    type: 'ROOT',
                    name: '发起人',
                    desc: '任何人',
                    props: {
                        assignedUser: [],
                        formPerms: [],
                    },
                    children: {},
                },
                remark: '备注说明',
            })

            this.templateDialogShow = true
        },
        getList(params) {
          list( {
                pageNo: this.pages.current,
                pageSize: this.pages.size,
                ...params
            }).then(
                ({ code, data }) => {
                    if(code == 200){
                        this.listDetails = data.records
                        this.pages.current = data.current
                        this.pages.size = data.size
                        this.pages.total = data.total
                    }
                },
                (err) => {
                }
            )
        },

        getDict() {
          getDefBIzdictByLxdm(
                {
                    lxdm: 'VMS_WORK_FLOW_TYPE'
                }
            ).then(
                ({ data }) => {
                    this.dictList = data
                },
                (err) => {
                }
            )
        },

        pre(){
            this.active -= 1;
        },
        next(){
            this.active += 1;
        },
        initForm(){
            this.formData = {
                            templateName:'',
                            remark:'',
                            busType:'',
                        }
                        this.active = 0;
        },
        subTemp() {
            let p = {
                ...this.$store.state.flow.design,
                ...this.formData,
            }
            if (this.$store.state.flow.design.id) {
                p.id = this.$store.state.flow.design.id
            }
            p.process = JSON.stringify(p.process)
            p.settings = JSON.stringify(p.settings);

            let request =p.id ? updateTemplate(p) : saveTemplate(p)
            request.then(
                (data) => {
                    if(data.code == 200){
                        this.$message({
                            type: 'success',
                            message: data.message,
                        })
                        this.templateDialogShow = false;

                        this.getList();
                        this.$store.commit('loadForm', {})
                    }
                },
                (err) => {
                }
            )

        },
    },
    created(){

    },
    watch:{
        templateDialogShow(newVal){
            if(!newVal){
                this.initForm()
            }
        }
    },
    mounted() {
        this.getDict()
        this.getList()
    },
    components: {
        tableList,
        processDesign,
    },
}
</script>

  <style lang = "scss" scoped>
.getHistory
    :deep
    .el-form--inline
    .el-form-item__content
    .el-select
    .el-input
    .el-input__inner {
    max-width: 100px;
}
.getHistory :deep .el-form--inline .el-form-item__content .el-date-editor {
    width: 240px;
}
:deep .el-input--prefix .el-input__inner {
    padding: 0 30px;
}

.getHistory {
    .dialogClass {
        .cardWrap {
            margin-bottom: 20px;
        }
        .qiyeContent {
            .qiyeC {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 20px 10px 0;
                span:last-child {
                    line-height: 0;
                }
            }
            // margin: 0 20px 10px 0;
            &:last-child {
                margin: 0 0px 10px 0;
            }
            .colorGray {
                color: #909399;
            }
        }
    }
}
</style>
